<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>云任务系统</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" type="text/css" href="css/cloud-admin.css" >
	<link rel="stylesheet" type="text/css"  href="css/themes/default.css" id="skin-switcher" >
	<link rel="stylesheet" type="text/css"  href="css/responsive.css" >
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- ANIMATE -->
	<link rel="stylesheet" type="text/css" href="css/animatecss/animate.min.css" />
	<!-- DATE RANGE PICKER -->
	<link rel="stylesheet" type="text/css" href="js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
	<!-- TODO -->
	<link rel="stylesheet" type="text/css" href="js/jquery-todo/css/styles.css" />
	<!-- FULL CALENDAR -->
	<link rel="stylesheet" type="text/css" href="js/fullcalendar/fullcalendar.min.css" />
	<!-- JQUERY UI-->
	<link rel="stylesheet" type="text/css" href="js/jquery-ui-1.10.3.custom/css/custom-theme/jquery-ui-1.10.3.custom.min.css" />
	<!-- DATE RANGE PICKER -->
	<!-- DATA TABLES -->
	<link rel="stylesheet" type="text/css" href="js/datatables/media/css/jquery.dataTables.min.css" />
	<link rel="stylesheet" type="text/css" href="js/datatables/media/assets/css/datatables.min.css" />
	<link rel="stylesheet" type="text/css" href="js/datatables/extras/TableTools/media/css/TableTools.min.css" />
	<!-- FONTS -->
	<!-- JQUERY -->
	<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<!--<script src="js/flot/jquery.min.js"></script>-->
	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>

	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>

	<!-- DATE RANGE PICKER -->
	<script src="js/bootstrap-daterangepicker/moment.min.js"></script>

	<script src="js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script><script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- SPARKLINES -->
	<script type="text/javascript" src="js/sparklines/jquery.sparkline.min.js"></script>
	<!-- EASY PIE CHART -->
	<script src="js/jquery-easing/jquery.easing.min.js"></script>
	<script type="text/javascript" src="js/easypiechart/jquery.easypiechart.min.js"></script>
	<!--&lt;!&ndash; FLOT CHARTS &ndash;&gt;-->
	<!--<script src="js/flot/jquery.flot.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.time.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.selection.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.resize.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.pie.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.stack.min.js"></script>-->
	<!--<script src="js/flot/jquery.flot.crosshair.min.js"></script>-->
	<script src="highcharts.js"></script>
	<script src="exporting.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script><script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- DATA TABLES -->
	<script type="text/javascript" src="js/datatables/media/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="js/datatables/media/assets/js/datatables.min.js"></script>
	<script type="text/javascript" src="js/datatables/extras/TableTools/media/js/TableTools.min.js"></script>
	<script type="text/javascript" src="js/datatables/extras/TableTools/media/js/ZeroClipboard.min.js"></script>
	<!-- TODO -->
	<script type="text/javascript" src="js/jquery-todo/js/paddystodolist.js"></script>
	<!-- TIMEAGO -->
	<script type="text/javascript" src="js/timeago/jquery.timeago.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="js/script.js"></script>
	<script src="js/charts.js"></script>
	<script src="scriptjs/task_mgt_admin.js"></script>
</head>
<!-- JAVASCRIPTS-->

<!-- /JAVASCRIPTS -->
<body id="bodyid">
<!-- HEADER -->
<header class="navbar clearfix" id="header">
	<div class="container">
		<div class="navbar-brand">
			<!-- COMPANY LOGO -->
			<a href="index.html">
				<img src="img/logo/logo.png" alt="Cloud Admin Logo" class="img-responsive" height="30" width="120">
			</a>
			<!-- /COMPANY LOGO -->
			<!-- TEAM STATUS FOR MOBILE -->
			<div class="visible-xs">
				<a href="#" class="team-status-toggle switcher btn dropdown-toggle">
					<i class="fa fa-users"></i>
				</a>
			</div>
			<!-- /TEAM STATUS FOR MOBILE -->
			<!-- SIDEBAR COLLAPSE -->
			<div id="sidebar-collapse" class="sidebar-collapse btn">
				<i class="fa fa-bars"
				   data-icon1="fa fa-bars"
				   data-icon2="fa fa-bars" ></i>
			</div>
			<!-- /SIDEBAR COLLAPSE -->
		</div>
		<!-- BEGIN TOP NAVIGATION MENU -->
		<ul class="nav navbar-nav pull-right" style="min-width:30px;">
			<!-- BEGIN USER LOGIN DROPDOWN -->
			<li class="dropdown user" id="header-user" >
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<img alt="" src="img/avatars/avatar9.jpg" />
					<span class="username">王阿星</span>
					<i class="fa fa-angle-down"></i>
				</a>
				<ul class="dropdown-menu">
					<!--<li><a href="#"><i class="fa fa-user"></i> My Profile</a></li>-->
					<li><a  id="langli" ><i class="fa fa-cog"></i> 更换语言</a></li>
					<!--<li><a href=""><i class="fa fa-eye"></i> Privacy Settings</a></li>-->
					<li><a id="logout_id" href="/api/user/logout"><i class="fa fa-power-off"></i>注销</a></li>
				</ul>
			</li>
			<!-- END USER LOGIN DROPDOWN -->
		</ul>
		<!-- NAVBAR LEFT -->
		<ul class="nav navbar-nav pull-right hidden-xs" id="navbar-left" style="min-width: 0px;">
			<li class="dropdown" >
				<a href="#" class="dropdown-toggle" data-toggle="dropdown">
					<i class="fa fa-cog"></i>
					<span class="name" id="Skins_id">皮肤</span>
					<i class="fa fa-angle-down"></i>
				</a>
				<ul class="dropdown-menu skins">
					<li class="dropdown-title">
						<span><i class="fa fa-leaf"></i> Theme Skins</span>
					</li>
					<li><a href="#" data-skin="default">Subtle (default)</a></li>
					<li><a href="#" data-skin="night">Night</a></li>
					<li><a href="#" data-skin="earth">nEarth</a></li>
					<li><a href="#" data-skin="utopia">Utopia</a></li>
					<li><a href="#" data-skin="nature">Nature</a></li>
					<li><a href="#" data-skin="graphite">Graphite</a></li>
				</ul>
			</li>

		</ul>
		<!-- /NAVBAR LEFT -->
		<!-- END TOP NAVIGATION MENU -->
	</div>

</header>
<!--/HEADER -->
<!-- PAGE -->
<section id="page">
	<!-- SIDEBAR -->
	<div id="sidebar" class="sidebar">
		<div class="sidebar-menu nav-collapse">
			<div class="divide-20"></div>

			<!-- SIDEBAR MENU -->
			<ul>
				<li class="">
					<a href="user_mgt_admin.html" >
						<i class="fa fa-users" style="margin-right:11px;"></i> <span class="menu-text" id="user_mangid"> 用户管理</span>
						<span class="selected"></span>
					</a>
				</li>
				<li class="active">
					<a href="task_mgt_admin.html">
						<i class="fa fa-tachometer fa-fw"></i> <span class="menu-text" id="task_mangid">任务管理</span>
						<span class="selected"></span>
					</a>
				</li>
				<li class="">
					<a href="log_mgt_admin.html">
						<i class="fa fa-book" style="margin-right:11px;"></i> <span class="menu-text" id="log_mangid"> 日志管理</span>
						<span class="selected"></span>
					</a>
				</li>
			</ul>
			<!-- /SIDEBAR MENU -->
		</div>
	</div>
	<!-- /SIDEBAR -->
	<div id="main-content">
		<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
		<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h4 class="modal-title">Box Settings</h4>
					</div>
					<div class="modal-body">
						Here goes box setting content.
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="button" class="btn btn-primary">Save changes</button>
					</div>
				</div>
			</div>
		</div>
		<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
		<div class="container">
			<div class="row">
				<div id="content" class="col-lg-12">
					<!-- PAGE HEADER-->
					<div class="row">
						<div class="col-sm-12">
							<div class="page-header">
								<!-- STYLER -->

								<!-- /STYLER -->
								<!-- BREADCRUMBS -->
								<ul class="breadcrumb">
									<li>
										<i class="fa fa-home"></i>
										<a href="user_mgt_admin.html" id="home_id">主页</a>
									</li>
								</ul>
								<!-- /BREADCRUMBS -->
								<div class="clearfix">
									<h3 class="content-title pull-left" id="Dtask">任务管理</h3>
								</div>
							</div>
						</div>
					</div>
					<!-- /PAGE HEADER -->
					<!-- DASHBOARD CONTENT -->
					<div class="row">
						<!-- COLUMN 1 -->
						<!-- EXPORT TABLES-NodeView -->
						<div id="nodeView" class="row">
							<div class="col-md-12">
								<!-- BOX -->
								<div class="box border purple">
									<div class="box-title">
										<i class="fa fa-table"></i>
										<h4 id="CPCEP_id">节点列表</h4>
										<div class="tools hidden-xs">
											<a  id="reloadForNodeList" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
										</div>
									</div>
									<div class="box-body">
										<table id="datatableForNode" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
											<tr>
												<th id="nosort"  style="text-align:center;padding:3px 3px 3px 3px;"><input type="checkbox" style="visibility: hidden;" id="checkAll"></th>
												<th id="number_id">编号</th>
												<th id="node_id">节点ID</th>
												<th id="node_type">节点类型</th>
												<th id="node_name">节点名称</th>
												<th id="user_name">用户名</th>
												<th id="node_state">节点状态</th>
												<th class="hidden-xs" id="task_number">正在执行任务数</th>
												<th id="his_task">历史执行任务数</th>
												<th id="cpu">CPU占用率</th>
												<th id="ram">内存使用率</th>
												<th class="hidden-xs" id="net">带宽占用率</th>
												<th class="hidden-xs" id="operate">操作</th>
											</tr>
											</thead>
											<tbody id="tbodyfornodelist">
											<!--<tr class="gradeX">-->
											<!--<td ><input type="checkbox" name="checkList"></td>-->
											<!--<td>1</td>-->
											<!--<td>332</td>-->
											<!--<td class="hidden-xs">java</td>-->
											<!--<td class="hidden-xs">这是第一个节点名</td>-->
											<!--<td class="center">王阿星</td>-->
											<!--<td class="center hidden-xs">活跃</td>-->
											<!--<td class="hidden-xs"><a onclick="changeToTaskView()" class="btn btn-info" style="font-size:4px;padding:0px 8px;">6</a></td>-->
											<!--<td class="center"><a href="#table-modal-his" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">3</a></td>-->
											<!--<td class="center hidden-xs"><a href="#table-modal-showVelocity" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">38%</a></td>-->
											<!--<td class="center hidden-xs"><a href="#table-modal-showVelocity" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">56%</a></td>-->
											<!--<td class="center hidden-xs"><a href="#table-modal-showVelocity" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">28%</a></td>-->
											<!--<td class="center hidden-xs"><a href="#table-modal-closeNode" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">关闭</a></td>-->
											<!--</tr>-->
											</tbody>
										</table>
									</div>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /EXPORT TABLES-NodeView -->
						<!-- EXPORT TABLES-TaskView -->
						<div id="taskView" style="display:none;" class="row">
							<div class="col-md-12">
								<!-- BOX -->
								<a type="button" href="/task_mgt_admin.html" style="margin-left:0.5%;margin-bottom:0.2%;font-size: large;" class="btn btn-link" data-dismiss="modal" id="back"><i class="fa fa-angle-double-left"></i> 返回</a>
								<div class="box border purple">
									<div class="box-title">
										<h4 id="node_list"><i class="fa fa-table"></i>某个节点（动态显示）任务列表</h4>
										<div class="tools hidden-xs">

										</div>
									</div>
									<div class="box-body">
										<table id="datatableForTask" cellpadding="0" cellspacing="0" border="0" style="width: 100%;" class="datatable table table-striped table-bordered table-hover">
											<thead>
											<tr>
												<th id="task_number1">编号</th>
												<th id="task_name1">任务名称</th>
												<th id="task_type1">任务模式</th>
												<th id="time_info1">时间信息</th>
												<th class="hidden-xs" id="resource_info">资源信息</th>
											</tr>
											</thead>
											<tbody id="tbodyforTaskList">
											</tbody>
										</table>
									</div>
								</div>
								<!-- /BOX -->
							</div>
						</div>
						<!-- /EXPORT TABLES-TaskView -->
						<!-- AUTO UPDATING CURVE-查看任务三种折线图 -->
						<div id="threeCharts" style="width:100%;display:none;">
							<div class="box border orange">
								<div class="box-title">
									<h4><i class="fa fa-signal"></i>CPU曲线图</h4>
									<div class="tools hidden-xs">
									</div>
								</div>
								<div class="box-body" id="cpucontainer">
									<!--<div id="chart_4_1" class="chart" style="width: 100%;"></div>-->
								</div>
							</div>
							<div class="box border orange" id="taskDynamicLine">
								<div class="box-title">
									<h4><i class="fa fa-signal"></i>内存曲线图</h4>
									<div class="tools hidden-xs">
									</div>
								</div>
								<div class="box-body" id="ramcontainer">
									<!--<div id="chart_4_2" class="chart" style="width: 100%;"></div>-->
								</div>
							</div>
							<div class="box border orange">
								<div class="box-title">
									<h4><i class="fa fa-signal"></i>网络带宽曲线图</h4>
									<div class="tools hidden-xs">

									</div>
								</div>
								<div class="box-body" id="netcontainer">
									<!--<div id="chart_4_3" class="chart" style="width: 100%;"></div>-->
								</div>
							</div>
						</div>
						<!-- /AUTO UPDATING CURVE -->
						<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
						<div class="modal fade" id="table-modal-current" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title">成功任务</h4>
									</div>
									<div class="modal-body">

										<table id="datatable2" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
											<tr>
												<th>编号</th>
												<th>任务名称</th>
												<th class="hidden-xs">所在节点</th>
												<th>状态</th>
												<th>时间信息</th>
												<th>资源信息</th>
											</tr>
											</thead>
											<tbody>
											<tr class="gradeA">
												<td> 1</td>
												<td>Gecko</td>
												<td class="hidden-xs">Win 95+ / OSX.1+</td>
												<td class="center"><i class="fa fa-star-o"/></td>
												<td class="center hidden-xs"><a href="#table-modal-showtime" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">查看</a></td>
												<td class="hidden-xs"><a href="#table-modal-showresource" data-toggle="modal" class="btn btn-info" style="font-size:4px;padding:0px 8px;">查看</a></td>
											</tr>
											</tbody>

										</table>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-danger" data-dismiss="modal" >close</button>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="table-modal-his" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="his_text">历史任务</h4>
									</div>
									<div class="modal-body" style="margin-top: 1%;">

										<table id="datatableForHisTask" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
											<tr>
												<th id="his_number">编号</th>
												<th id="task_name">任务名称</th>
												<th id="task_type">任务模式</th>
												<th id="time_info">时间信息</th>
											</tr>
											</thead>
											<tbody id="tbodyforHisTask">



											</tbody>
										</table>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-danger" data-dismiss="modal" id="close_button">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="table-modal-closeNode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="tips">提示</h4>
									</div>
									<div class="modal-body" style="text-align: center;">
										<input class="hidden" id="hiddenforCloseOneNode"/>
										<input class="hidden" id="hiddenforCloseIndex"/>
										<input class="hidden" id="hiddenforCloseOperateButton"/>

										<label style="font-size: larger;" id="sureText_id" text="在执行"/>正在执行</label><span id="spanForActiveTask"/></span><label style="font-size: larger;">个任务，确定关闭该节点？</label>
									</div>
									<div class="modal-footer">
										<input type="button" onclick="closeTheNode()" class="btn btn-danger" data-dismiss="modal" id="sureForCloseOneNode" value="确定"/>
										<input type="button" class="btn btn-inverse" data-dismiss="modal" id="cancelForDeleteOneNode" value="取消"/>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="table-modal-ReActiveNode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="startnode">开启节点</h4>
									</div>
									<div class="modal-body" style="text-align: center;">
										<input class="hidden" id="hiddenforStartOneNode"/>
										<input class="hidden" id="hiddenforStartIndex"/>
										<input class="hidden" id="hiddenforStartOperateButton"/>
										<label style="font-size: larger;"  text="在执行"/>确定开启此节点吗？</label>
									</div>
									<div class="modal-footer">
										<input type="button" onclick="StartTheNode()" class="btn btn-danger" data-dismiss="modal" id="sureForStartOneNode" value="确定"/>
										<input type="button" class="btn btn-inverse" data-dismiss="modal" id="cancelForStartOneNode" value="取消"/>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="table-modal-showTaskSchedual" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title">任务时间信息</h4>
									</div>
									<div class="modal-body">

										<table id="datatableForDetailTime" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

											<tbody id="tbodyForDetailTime">

											<tr class="gradeA">
												<td> 开始时间</td>
												<td>2016-09-25 11:12</td>
											</tr>

											<tr class="gradeA">
												<td> 执行时间</td>
												<td>1d 2h 3m 44s</td>
											</tr>
											</tbody>
										</table>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-danger" data-dismiss="modal" id="button_close_id">关闭</button>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="table-modal-showRecSchedual" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title">任务资源信息</h4>
									</div>
									<div class="modal-body">

										<table id="datatable2" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">

											<tbody>

											<tr class="gradeA">
												<td> 开始时间</td>
												<td>2016-09-25 11:12</td>
											</tr>

											<tr class="gradeA">
												<td> 执行时间</td>
												<td>1d 2h 3m 44s</td>
											</tr>
											</tbody>
										</table>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
									</div>
								</div>
							</div>
						</div>

						<div class="modal fade" id="table-modal-showtime" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="time_text">XX时间信息</h4>
									</div>
									<div class="modal-body">

										<table id="datatable" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
											<tr>
												<th></th>
												<th></th>

											</tr>
											</thead>
											<tbody>

											<tr class="gradeA">
												<td id="start_time"> 开始时间</td>
												<td>2016-09-25 11:12</td>
											</tr>
											<tr class="gradeA">
												<td id="execute_time"> 执行时间</td>
												<td>1d 2h 3m 44s</td>
											</tr>
											<tr class="gradeA">
												<td id="end_time"> 结束时间</td>
												<td>2016-09-26 13:15</td>
											</tr>

											</tbody>

										</table>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-success" data-dismiss="modal" id="sure_time">确定</button>
									</div>
								</div>
							</div>
						</div>
						<div class="modal fade" id="table-modal-showVelocity" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title" id="cpu_info">CPU动态信息(后期动态修改成内存和网络)</h4>
									</div>
									<div class="modal-body">

										<!-- AUTO UPDATING CURVE -->
										<div class="box border orange">
											<div class="box-title">
												<div class="tools hidden-xs">

												</div>
											</div>
											<div class="box-body" style="padding-left: 0px;padding-top: 0px;padding-right: 0px;"id="cpucontain">
												<!--<div id="chart_4" class="chart" style="width: 100%;"></div>-->
											</div>
										</div>
										<!-- /AUTO UPDATING CURVE -->

									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-success" data-dismiss="modal" id="cpu_sure">确定</button>
									</div>
								</div>
							</div>
						</div>


						<div class="modal fade" id="table-modal-showresource" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
							<div class="modal-dialog">
								<div class="modal-content modal-table">
									<div class="modal-header">
										<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
										<h4 class="modal-title">XX资源信息</h4>
									</div>
									<div class="modal-body">

										<table id="datatable2" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
											<thead>
											<tr>
												<th></th>
												<th></th>
												<th class="hidden-xs"></th>
											</tr>
											</thead>
											<tbody>

											<tr class="gradeA">
												<td> CPU占用率</td>
												<td>35%</td>
												<td class="hidden-xs">Win 95+ / OSX.2+</td>
											</tr>
											<tr class="gradeA">
												<td> 内存使用率</td>
												<td>22%</td>
												<td class="hidden-xs">Win 95+ / OSX.3+</td>

											</tr>
											<tr class="gradeA">
												<td> 网络宽带占用率</td>
												<td>65%</td>
												<td class="hidden-xs">Win 95+ / OSX.3+</td>

											</tr>

											</tbody>

										</table>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
									</div>
								</div>
							</div>
						</div>
						<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
						<div class="col-md-6" style="visibility:hidden;">
							<div class="box solid grey" style="visible:disabled;">
								<div class="box-title">
									<h4><i class="fa fa-dollar"></i>Revenue</h4>
									<div class="tools">
											<span class="label label-danger">
												20% <i class="fa fa-arrow-up"></i>
											</span>

										<a href="javascript:;" class="reload">
											<i class="fa fa-refresh"></i>
										</a>

									</div>
								</div>
								<div class="box-body">
									<div id="chart-revenue" style="height:240px"></div>
								</div>
							</div>
						</div>
						<!-- /COLUMN 2 -->
					</div>
					<!-- /DASHBOARD CONTENT -->
					<!-- HERO GRAPH -->
					<div class="row" style="visibility:hidden;">
						<div class="col-md-12">
							<!-- BOX -->

							<div class="box border green">
								<div class="box-title">
									<h4><i class="fa fa-bars"></i> <span class="hidden-inline-mobile">Traffic & Sales</span></h4>
								</div>
								<div class="box-body">
									<div class="tabbable header-tabs">
										<ul class="nav nav-tabs">
											<li><a href="#box_tab2" data-toggle="tab"><i class="fa fa-search-plus"></i> <span class="hidden-inline-mobile">Select & Zoom Sales Chart</span></a></li>
											<li class="active"><a href="#box_tab1" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> <span class="hidden-inline-mobile">Traffic Statistics</span></a></li>
										</ul>
										<div class="tab-content">
											<div class="tab-pane fade in active" id="box_tab1">
												<!-- TAB 1 -->
												<div id="chart-dash" class="chart"></div>
												<hr class="margin-bottom-0">
												<!-- /TAB 1 -->
											</div>
											<div class="tab-pane fade" id="box_tab2">
												<div class="row">
													<div class="col-md-8">
														<div class="demo-container">
															<div id="placeholder" class="demo-placeholder"></div>
														</div>
													</div>
													<div class="col-md-4">
														<div class="demo-container" style="height:100px;">
															<div id="overview" class="demo-placeholder"></div>
														</div>
														<div class="well well-bottom">
															<h4>Month over Month Analysis</h4>
															<ol>
																<li>Selection support makes it easy to construct flexible zooming schemes.</li>
																<li>With a few lines of code, the small overview plot to the right has been connected to the large plot.</li>
																<li>Try selecting a rectangle on either of them.</li>
															</ol>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /BOX -->
						</div>
					</div>
					<!-- /HERO GRAPH -->
					<!-- CALENDAR & CHAT -->

					<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
					</div>
				</div><!-- /CONTENT-->
			</div>
		</div>
	</div>
</section>
<!--/PAGE -->
</body>
<script>
	var timer;
	var chart;
	var data = new Array(null, null, null, null, null,null, null, null, null, null, null, null,null, null, null, null, null,null, null, null, null, null, null, null);
	jQuery(document).ready(function() {

		//$("th").removeClass();
		App.setPage("index");  //Set current page
		App.init(); //Initialise plugins and elements
		//Charts.initCharts();
//			$('#datatable2 tbody').on( 'click', 'tr', function () {
//				$(this).toggleClass('selected');
//			} );
	});
	$('#table-modal-showVelocity').on('hidden.bs.modal', function () {//模态框关闭时重新初始化
		// 执行一些动作...
		//alert("模态框关闭了");
		chart=null;
		clearInterval(timer);
		//data = new Array(null, null, null, null, null,null, null, null, null, null, null, null,null, null, null, null, null,null, null, null, null, null, null, null);
	});
	function clickbutton(obj){//查看cpu折线图
		Highcharts.setOptions({
			global: {
				useUTC: false
			}
		});
		var nodeid=obj.id;
		$("#table-modal-showVelocity").modal("show");
		chart = new Highcharts.Chart({
			chart: {
				//将报表对象渲染到层上
				renderTo: 'cpucontain',
				//type: 'spline',
				animation: Highcharts.svg, // don't animate in old IE
				events: {
					load: function () {
						// set up the updating of the chart each second
						var series = this.series[0];
						timer=setInterval(function () {
							$.ajax({
								type: "POST",
								url: "http://localhost:8080/api/node/getOnePerformance",
								data:{nodeId:nodeid,number:"1"},
								async: true, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
								success: function(result){
									var x = (new Date()).getTime(), // current time
											y = result.data;
									series.addPoint([x, y], true, true);
//									data.shift();//去除第一个元素
//									data.push([result.data]);
//									chart.series[0].setData(data);
//									$("tspan").css("visibility","hidden");
//									$(".highcharts-container").css("width","95%");
								}
							}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

						}, 1000);
					}
				}
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
			},
			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
				}
			},

			legend: {
				enabled: false
			},
			exporting: {
				enabled: false
			},
			//设定报表对象的初始数据
			series: [{
				name: 'CPU占用率',
				data: (function() {
					// generate an array of random data
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -49; i <= 0; i++) {
						data.push({
							x: time + i * 1000,
							y: null
						});
					}
					return data;
				})()
			}]
		});
		$(".highcharts-container").css("width","95%");
		$("tspan").css("visibility","hidden");
		function getForm(){
			$.ajax({
				type: "POST",
				url: "http://localhost:8080/api/node/getOnePerformance",
				data:{nodeId:nodeid,number:"1"},
				async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
				success: function(result){
					data.shift();//去除第一个元素
					data.push([result.data]);
					chart.series[0].setData(data);
					$("tspan").css("visibility","hidden");
					$(".highcharts-container").css("width","95%");
				}
			}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示
		}
		//$(document).ready(function() {
		//每隔1秒自动调用方法，实现图表的实时更新
		//timer=window.setInterval(getForm,1000);
	}
	function clickRambutton(obj){//查看内存折线图
		var nodeid=obj.id;
		$("#table-modal-showVelocity").modal("show");
		$("#cpu_info").text("内存动态");
		chart = new Highcharts.Chart({
			chart: {
				//将报表对象渲染到层上
				renderTo: 'cpucontain',
				//type: 'spline',
				animation: Highcharts.svg, // don't animate in old IE
				events: {
					load: function () {
						// set up the updating of the chart each second
						var series = this.series[0];
						timer=setInterval(function () {
							$.ajax({
								type: "POST",
								url: "http://localhost:8080/api/node/getOnePerformance",
								data:{nodeId:nodeid,number:"2"},
								async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
								success: function(result){
									var x = (new Date()).getTime(), // current time
											y = result.data;
									series.addPoint([x, y], true, true);
//									data.shift();//去除第一个元素
//									data.push([result.data]);
//									chart.series[0].setData(data);
//									$("tspan").css("visibility","hidden");
//									$(".highcharts-container").css("width","95%");
								}
							}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

						}, 1000);
					}
				}
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
			},
			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
				}
			},
			legend: {
				enabled: false
			},
			exporting: {
				enabled: false
			},
			//设定报表对象的初始数据
			series: [{
				name: 'CPU占用率',
				data: (function() {
					// generate an array of random data
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -49; i <= 0; i++) {
						data.push({
							x: time + i * 1000,
							y: null
						});
					}
					return data;
				})()
			}]
		});
		$(".highcharts-container").css("width","95%");
		$("tspan").css("visibility","hidden");
		function getForm(){
			$.ajax({
				type: "POST",
				url: "http://localhost:8080/api/node/getOnePerformance",
				data:{nodeId:nodeid,number:"1"},
				async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
				success: function(result){
					data.shift();//去除第一个元素
					data.push([result.data]);
					chart.series[0].setData(data);
					$("tspan").css("visibility","hidden");
					$(".highcharts-container").css("width","95%");
				}
			}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示
		}
		//$(document).ready(function() {
		//每隔1秒自动调用方法，实现图表的实时更新
		//timer=window.setInterval(getForm,1000);
	}
	function clickNetbutton(obj){//查看网络折线图
		var nodeid=obj.id;
		$("#table-modal-showVelocity").modal("show");
		$("#cpu_info").text("网络动态");
		chart = new Highcharts.Chart({
			chart: {
				//将报表对象渲染到层上
				renderTo: 'cpucontain',
				//type: 'spline',
				animation: Highcharts.svg, // don't animate in old IE
				events: {
					load: function () {
						// set up the updating of the chart each second
						var series = this.series[0];
						timer=setInterval(function () {
							$.ajax({
								type: "POST",
								url: "http://localhost:8080/api/node/getOnePerformance",
								data:{nodeId:nodeid,number:"3"},
								async: true, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
								success: function(result){
									var x = (new Date()).getTime(), // current time
											y = result.data;
									series.addPoint([x, y], true, true);
//									data.shift();//去除第一个元素
//									data.push([result.data]);
//									chart.series[0].setData(data);
//									$("tspan").css("visibility","hidden");
//									$(".highcharts-container").css("width","95%");
								}
							}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

						}, 2000);
					}
				}
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
			},
			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
				}
			},
			legend: {
				enabled: false
			},
			exporting: {
				enabled: false
			},
			//设定报表对象的初始数据
			series: [{
				name: 'CPU占用率',
				data: (function() {
					// generate an array of random data
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -49; i <= 0; i++) {
						data.push({
							x: time + i * 2000,
							y: null
						});
					}
					return data;
				})()
			}]
		});
		$(".highcharts-container").css("width","95%");
		$("tspan").css("visibility","hidden");
		function getForm(){
			$.ajax({
				type: "POST",
				url: "http://localhost:8080/api/node/getOnePerformance",
				data:{nodeId:nodeid,number:"1"},
				async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
				success: function(result){
					data.shift();//去除第一个元素
					data.push([result.data]);
					chart.series[0].setData(data);
					$("tspan").css("visibility","hidden");
					$(".highcharts-container").css("width","95%");
				}
			}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示
		}
		//$(document).ready(function() {
		//每隔1秒自动调用方法，实现图表的实时更新
		//timer=window.setInterval(getForm,1000);
	}

	function clickTaskbutton(obj){
		var nodeid=obj.id;
		$("#threeCharts").css("display","block");
		//$("#cpu_info").text("网络动态");
		chart = new Highcharts.Chart({
			chart: {
				//将报表对象渲染到层上
				renderTo: 'cpucontainer',
				//type: 'spline',
				animation: Highcharts.svg, // don't animate in old IE
				events: {
					load: function () {
						// set up the updating of the chart each second
						var series = this.series[0];
						timer=setInterval(function () {
							$.ajax({
								type: "POST",
								url: "http://localhost:8080/api/node/getOnePerformance",
								data:{nodeId:nodeid,number:"1"},
								async: true, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
								success: function(result){
									var x = (new Date()).getTime(), // current time
											y = result.data;
									series.addPoint([x, y], true, true);
//									data.shift();//去除第一个元素
//									data.push([result.data]);
//									chart.series[0].setData(data);
//									$("tspan").css("visibility","hidden");
//									$(".highcharts-container").css("width","95%");
								}
							}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

						}, 1000);
					}
				}
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
			},
			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
				}
			},
			legend: {
				enabled: false
			},
			exporting: {
				enabled: false
			},
			//设定报表对象的初始数据
			series: [{
				name: 'CPU占用率',
				data: (function() {
					// generate an array of random data
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -49; i <= 0; i++) {
						data.push({
							x: time + i * 1000,
							y: null
						});
					}
					return data;
				})()
			}]
		});
		new Highcharts.Chart({
			chart: {
				//将报表对象渲染到层上
				renderTo: 'ramcontainer',
				//type: 'spline',
				animation: Highcharts.svg, // don't animate in old IE
				events: {
					load: function () {
						// set up the updating of the chart each second
						var series = this.series[0];
						timer=setInterval(function () {
							$.ajax({
								type: "POST",
								url: "http://localhost:8080/api/node/getOnePerformance",
								data:{nodeId:nodeid,number:"2"},
								async: true, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
								success: function(result){
									var x = (new Date()).getTime(), // current time
											y = result.data;
									series.addPoint([x, y], true, true);
//									data.shift();//去除第一个元素
//									data.push([result.data]);
//									chart.series[0].setData(data);
//									$("tspan").css("visibility","hidden");
//									$(".highcharts-container").css("width","95%");
								}
							}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

						}, 1000);
					}
				}
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
			},
			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
				}
			},
			legend: {
				enabled: false
			},
			exporting: {
				enabled: false
			},
			//设定报表对象的初始数据
			series: [{
				name: 'CPU占用率',
				data: (function() {
					// generate an array of random data
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -49; i <= 0; i++) {
						data.push({
							x: time + i * 1000,
							y: null
						});
					}
					return data;
				})()
			}]
		});
		new Highcharts.Chart({
			chart: {
				//将报表对象渲染到层上
				renderTo: 'netcontainer',
				//type: 'spline',
				animation: Highcharts.svg, // don't animate in old IE
				events: {
					load: function () {
						// set up the updating of the chart each second
						var series = this.series[0];
						timer=setInterval(function () {
							$.ajax({
								type: "POST",
								url: "http://localhost:8080/api/node/getOnePerformance",
								data:{nodeId:nodeid,number:"3"},
								async: true, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
								success: function(result){
									var x = (new Date()).getTime(), // current time
											y = result.data;
									series.addPoint([x, y], true, true);
//									data.shift();//去除第一个元素
//									data.push([result.data]);
//									chart.series[0].setData(data);
//									$("tspan").css("visibility","hidden");
//									$(".highcharts-container").css("width","95%");
								}
							}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

						}, 2000);
					}
				}
			},
			xAxis: {
				type: 'datetime',
				tickPixelInterval: 150
			},
			tooltip: {
				formatter: function () {
					return '<b>' + this.series.name + '</b><br/>' +
							Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
							Highcharts.numberFormat(this.y, 2);
				}
			},
			legend: {
				enabled: false
			},
			exporting: {
				enabled: false
			},
			//设定报表对象的初始数据
			series: [{
				name: 'CPU占用率',
				data: (function() {
					// generate an array of random data
					var data = [],
							time = (new Date()).getTime(),
							i;
					for (i = -49; i <= 0; i++) {
						data.push({
							x: time + i * 2000,
							y: null
						});
					}
					return data;
				})()
			}]
		});
		$(".highcharts-container").css("width","95%");
		$("tspan").css("visibility","hidden");
		function getForm(){
			$.ajax({
				type: "POST",
				url: "http://localhost:8080/api/node/getOnePerformance",
				data:{nodeId:nodeid,number:"1"},
				async: true, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置
				success: function(result){
					data.shift();//去除第一个元素
					data.push([result.data]);
					chart.series[0].setData(data);
					$("tspan").css("visibility","hidden");
					$(".highcharts-container").css("width","95%");
				}
			}, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示
		}
	}

</script>
</html>
